<template>
  <div class="home">
    <!-- 背景图 -->
    <img :src="bg" alt class="home-bg" />
    <!-- 协议勾选按钮 -->
    <div class="home-select" @click="onSelect">
      <img :src="select" alt :class="[flag ? 'sel': 'nosel']" />
    </div>

    <!-- 领红包按钮 -->
    <div class="onSubmit" @click="onSubmit"></div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      bg:
        "https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/home_bg_1229.jpg",
      select:
        "https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/select.jpg",
      number: parseInt(Math.random() * (100 - 11) + 11),
      flag: true
    };
  },
  methods: {
    onSubmit() {
      if (this.flag === true) {
        Dialog.confirm({
          title: "前往领取活动奖品",
          message: "是否前往"
        })
          .then(() => {
            this.$router.push({ name: "detail", params: { number: this.number } });
          })
          .catch(() => {
            // on cancel
            this.$router.push({ name: "home"});
          });
       
      }
    },
    onSelect() {
      this.flag = !this.flag;
      //   console.log(this.flag)
      //  console.log('切换了')
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  width: 7.5rem;
  height: 15.04rem;

  .home-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .home-select {
    position: absolute;
    bottom: 1.36rem;
    left: 0.82rem;
    width: 0.2rem;
    height: 0.2rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      z-index: 0;
    }
  }

  .onSubmit {
    position: absolute;
    bottom: 1.84rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 0.8rem;
  }
}

.sel {
  display: block;
}

.nosel {
  display: none;
}
</style>

